import { connect } from 'dva'
import React, { Component } from 'react'
import { Icon, WhiteSpace, List, InputItem, ImagePicker } from 'antd-mobile'
import styles from './UserinfoEdit.css'
class InfoPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nickname: '',
            files: [],
            multiple: false,
        }
        this.handleInputChange = this.handleInputChange.bind(this);
    }
    componentWillMount() {
        let files = [{ url: this.props.user.photo, isorigin: '111' }];
        this.setState({
            files,
        });
    }
    photoonChange(files, type, index) {
        console.log(files, type, index);
        this.setState({
            files,
        });
    }
    handleInputChange(nickname) {
        this.setState({
          nickname
        });
      }
    editdone() {
        console.log('edit ok');
        const nickname = this.state.nickname === '' ? this.props.user.nickname : this.state.nickname;
        const photo = this.state.files[0];
        this.props.dispatch({type:'user/setinfo',payload:{nickname,photo}});
    }
    render() {
        const { files } = this.state;
        const { nickname } = this.props.user;
        return (
            <div>
                <div className={styles.headerbox}>
                    <Icon type="left" size="lg" color="#666" className={styles.backicon}
                        onClick={() => this.props.history.goBack()}
                    />
                    <Icon type="check" size="lg" color="#666" className={styles.okicon}
                        onClick={() => this.editdone()}
                    />
                    <div>
                        修改个人资料
                    </div>
                </div>
                <div className={styles.contentbox}>
                    <ImagePicker
                        length="3"
                        files={files}
                        onChange={this.photoonChange}
                        onImageClick={(index, fs) => console.log(index, fs)}
                        multiple={this.state.multiple}
                        selectable={files.length < 1}
                        accept="image/gif,image/jpeg,image/jpg,image/png"
                    />
                    <List>
                        <WhiteSpace size="lg"></WhiteSpace>
                        <InputItem
                            type="text"
                            placeholder={nickname}
                            name="nickname"
                            onChange={this.handleInputChange}
                        >昵称</InputItem>
                    </List>
                </div>
            </div>
        )
    }
}

function mapStateToProps({ user }) {
    return {
        user
    }
}


export default connect(mapStateToProps)(InfoPage);
